<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">账单</block>
		</cu-custom>
		<view>
			<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" placeholder="输入搜索的员工姓名" v-model="username" confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-gradual-green shadow-blur round" @click="bill()">搜索</button>
				</view>
			</view>
			
			<view class="cu-list menu-avatar comment solids-top top-xxl">
				<view class="padding ">
					<view class="flex justify-between">
						<text class="text-xs">共<text class="text-xxl">{{count}}</text>条记录</text>
						<text class="text-xs">金额：<text class="text-xxl">{{total}}</text>元</text>
					</view>
				</view>
				<view class="cu-item" v-for="(item,index) in list" :key="index">
					<view class="cu-avatar bg-olive text-white round">{{item.username.substr(1,1)}}</view>
					<view class="content">
						<view class="text-gray text-abc cuIcon-friendaddfill">{{item.username}}</view>
						<view class="cu-btn fr round bg-red mar-xx"><text class="cuIcon-deletefill text-olive" @click="billDelete(item.id)"></text></view>
						<view class="text-gray text-content text-df">
							{{item.content}}
						</view>
					
						<view class="margin-top-sm flex justify-between">
							<view class="text-gray text-df">{{item.work_date}}</view>
							<view class="margin-right-xs">
								<text class="cuIcon-moneybagfill text-red text-sm">{{item.money}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				list: [],
				total:0.00,
				count:0
			}
		},
		onLoad() {
			this.bill()
		},
		methods: {
			// 记账
			bill: async function() {
				let result = await this.$api.keepbill({
					username:this.username
				})
				if(result.code == 1){
					//console.log(result)
					this.list = result.data.data
					this.total = result.data.total
					this.count = result.data.count
				}else{
					this.list = null
				}
			},
			// 删除
			billDelete: function(id){
				uni.showModal({
					content:'确定要删除吗？',
					showCancel: true,
					cancelText:'取消',
					confirmText:'确定',
					success: async (res) => {
						if(res.confirm){
							let result = await this.$api.deletebill({id:id});
							if(result.code){
								this.$common.successToShow(result.msg);
								setTimeout(()=>{
									this.bill();
								},1000);
								return;
							}else{
								this.$common.errorToShow(result.msg)
								return;
							}
						}
					}
				})
			},
		}

	}
</script>

<style>
	.top-xxl{
		margin-top: 100upx;
	}
	.mar-xx{
		height: 60upx;
		width: 60upx;
	}
</style>
